<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>抄表系统</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="tgqmdj">
    <link rel="stylesheet" th:href="@{/mobile/jqueryweui/lib/weui.min.css}">
    <link rel="stylesheet" th:href="@{/mobile/jqueryweui/css/jquery-weui.min.css}">
    <link rel="stylesheet" th:href="@{/mobile/css/index.css}">

    <!-- <link rel="stylesheet" th:href="@{/plus/layui/css/layui.css}" media="all">
     <link rel="stylesheet" th:href="@{/plus/layer/theme/default/layer.css}" media="all">-->
    <script th:src="@{/mobile/jqueryweui/lib/jquery-2.1.4.min.js}"></script>
    <script th:src="@{/libs/JsBigDecimal.js}"></script>
    <!--<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>-->

</head>
<body ontouchstart>
<header class='demos-header'>
    <div class="demos-title">抄表工具</div>
</header>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_warn">
        <div class="weui-cell__hd"><label for="" class="weui-label">用户编号</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="biaoNumber" type="text" onKeyUp="value=value.replace(/[\W]/g,'')" value=""
                   placeholder="用户编号">
        </div>
        <div class="weui-cell__ft">
            <a href="javascript:;"onclick="getCusterInfo()" class="weui-btn weui-btn_mini weui-btn_primary">查询</a>
        </div>
    </div>
</div>

<div class="weui-cells__tips" style="display: none;" id="querMsgIdShow">
    <spen style="color: red;">*</spen>
    <span id="querMsgId"></span>
</div>

<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">客户姓名</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="custemName" readonly placeholder="无">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">客户手机</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" id="custemPhone" readonly placeholder="无">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">客户地址</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="custemAddress" readonly placeholder="无">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">上次表底</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" id="lastBiaoNumber" readonly pattern="[0-9]*" placeholder="无">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">上次抄表日期</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="lastBiaoTime" readonly pattern="[0-9]*" placeholder="无">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">单价</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="custemPrice" readonly placeholder="元/吨">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">
            <spen style="color: red;">*</spen>
            本次表底</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" id="nowBiaoNumber" onchange="autoPrice()" onblur="autoPrice()" onkeydown="autoPrice()" onkeyup="autoPrice()" pattern="[0-9]*" placeholder="请输入本次抄表读数">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">本次水价</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="benCiPrice" readonly placeholder="无">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">本次抄表日期</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="nowBiaoTime" readonly placeholder="">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">抄表人</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="createUser" readonly placeholder="无">
        </div>
    </div>

</div>

<div class="weui-cells__title">备注</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" id="mark" type="text" placeholder="输入备注信息(可以不填)">
        </div>
    </div>
</div>
<div class="weui-cells__tips">
    <spen style="color: red;">*</spen>
    请认真核实数据，避免抄错！
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" onclick="submitData()" id="sumbitDataBut" href="javascript:">提交抄表</a>
    <a id="msgBut" style="display:none;" href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading">正在提交抄表数据...</a>
</div>


<script th:src="@{/mobile/jqueryweui/js/jquery-weui.min.js}"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
    });
</script>
<script th:src="@{/mobile/jqueryweui/lib/fastclick.js}"></script>

<script type="application/javascript">
    var isLogin = "[[${IS_LOGIN}]]";
    function getCusterInfo() {
        $("#querMsgIdShow").hide();

        var biaoNumber = $("#biaoNumber").val();
        if (!biaoNumber) {
            return;
        }
        $.ajax({
            url: "/reading/getCusterInfo",
            type: "Get",
            data: {"biaoNumber": $("#biaoNumber").val()},
            success: function (ret) {
                if (ret.code == 0) {
                    var info = ret.data;
                    if(info){
                       $("#custemName").val(info.name)
                       $("#custemPhone").val(info.phone);
                       $("#lastBiaoNumber").val(info.currNumber);
                       $("#createUser").val(info.createUserName);
                       if(info.address){
                           $("#custemAddress").val(info.address);
                       }
                       var strPrice = info.price+" 元/吨";
                       $("#custemPrice").val(info.price);
                       if(info.createAt){
                           $('#lastBiaoTime').val(dateFtt(new Date(info.createAt),"yyyy-MM-dd hh:mm:ss"));
                       }
                       $('#nowBiaoTime').val(dateFtt(new Date(),"yyyy-MM-dd hh:mm:ss"));
                    }
                    if(ret.msg){
                        $("#querMsgId").text(ret.msg);
                        $("#querMsgIdShow").show();
                    }
                } else {
                    $("#querMsgId").text(ret.msg);
                    $("#querMsgIdShow").show();
                    if(ret.code == 405){
                        login();
                    }

                }
            }
        })

    }
    
    function clearFromData() {
        $("#biaoNumber").val("");
        $("#custemName").val("--")
        $("#custemPhone").val("--");
        $("#lastBiaoNumber").val("--");
        $("#nowBiaoNumber").val("--");
        $("#lastBiaoTime").val("--");
        $("#nowBiaoTime").val("--")
        $("#mark").val("");
    }

    function submitData() {

        var biaoNumber = $("#biaoNumber").val();
        var nowBiaoNumber = $("#nowBiaoNumber").val()
        var mark = $("#mark").val();
        if(biaoNumber==null || biaoNumber==""){
            $.toast("水表号不能空！", "cancel", function(toast) {
                console.log(toast);
            });
            return;
        }
        if(nowBiaoNumber==null || nowBiaoNumber==""){
            $.toast("本次抄表数不能空！", "cancel", function(toast) {
                console.log(toast);
            });
            return;
        }
        var lastBiaoNumber = $("#lastBiaoNumber").val();
        var last = Number(lastBiaoNumber);
        var now = Number(nowBiaoNumber);
        if(now<last){
            $.toast("本次表底不能小于上次表底", "cancel", function(toast) {
                console.log(toast);
            });
           return;
        }
        $("#msgBut").show();
        $("#sumbitDataBut").hide();
        $.showLoading("正在提交抄表数据");

        $.ajax({
            url: "/reading/submitReadData",
            type: "POST",
            data: {
                "biaoNumber": $("#biaoNumber").val(),
                "nowBiaoNumber": $("#nowBiaoNumber").val(),
                "mark": $("#mark").val()
            },
            success: function (ret) {
                $.hideLoading();
                clearFromData();
                $("#msgBut").hide();
                $("#sumbitDataBut").show();

                if(ret.code==0){
                    $.toast("提交成功！", function() {
                        console.log('close');
                    });
                    return;
                }
                if(ret.code == 405){
                    login();
                    return;
                }
                $.toast(ret.msg, "cancel", function(toast) {
                    console.log(toast);
                });
            }
        })
    }

    function dateFtt(date, fmt) {
        var o = {
            "M+": date.getMonth() + 1,                 //月份
            "d+": date.getDate(),                    //日
            "h+": date.getHours(),                   //小时
            "m+": date.getMinutes(),                 //分
            "s+": date.getSeconds(),                 //秒
            "q+": Math.floor((date.getMonth() + 3) / 3), //季度
            "S": date.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    if("false"===isLogin){
        login();
    }

    function login() {
        $.login({
            title: '登录',
            text: '请输入用户名和密码',
            onOK: function (username, password) {
                $.ajax({
                    type: "POST",
                    url: "/login",
                    data: {"username":username,"password":password,"tools":1},
                    dataType: "json",
                    success: function (data) {
                        if (data.status == 200) {
                            $.toast('登录成功!');
                            return;
                        }else{
                            $.toast(data.msg);
                            setTimeout(function () {
                                login();
                            },2000)

                        }

                    }
                });

            }
        });
    }
    
    function autoPrice() {
        var nowBiaoNumber = new BigDecimal($("#nowBiaoNumber").val());

        var nowBiaoNumberStr = $("#nowBiaoNumber").val();
        //alert(nowBiaoNumberStr.length);
        var oEvent = window.event;
        if (oEvent.keyCode == 8 && nowBiaoNumberStr.length<=1) {
            $("#benCiPrice").val("0");
            return;
        }

        if(nowBiaoNumber){

            var lastBiaoNumber = new BigDecimal($("#lastBiaoNumber").val());

            var custemPrice =new BigDecimal($("#custemPrice").val());

            var benciBiao = nowBiaoNumber.subtract(lastBiaoNumber);
            var benCiPrice = benciBiao.multiply(custemPrice);
            benCiPrice = benCiPrice+"";
            benCiPrice = benCiPrice.substring(0,benCiPrice.indexOf(".")+3)



            $("#benCiPrice").val(benCiPrice);
            return;
        }
        $("#benCiPrice").val("0");
    }


</script>
</body>
</html>
